<template>
  <div class="container" :style="scaleStyle">
    <div class="container_top"><p>东阳市中小学报名检测分析</p></div>
    <div class="container_mid">
      <div class="container_mid_left"></div>
      <div class="container_mid_content">
        <div class="cardbox">
          <p class="cardbox_title">报名前</p>
          <div class="cardbox_content">
            <div class="cardmin" @click="$router.push('/xuequfenxi')">
               <div class="cardtop"><img src="../assets/img/mdot1.svg" /> </div>
               <div class="cardtitle"><p>学区分析</p></div>
            </div>
            <div class="cardmin" @click="$router.push('/yubaom')">
              <div class="cardtop"><img src="../assets/img/mdot2.svg" /> </div>
              <div class="cardtitle"><p>预报名分析</p></div>
            </div>
          </div>
        </div>
        <div class="cardbox">
          <p class="cardbox_title">报名中</p>
          <div class="cardbox_content">
            <div class="cardmax" @click="$router.push('/shishibaoming')">
              <div class="cardtop"><img src="../assets/img/mdot3.svg" /> </div>
              <div class="cardtitle"><p>实时报名</p></div>
            </div>
          </div>

        </div>
        <div class="cardbox">
          <p class="cardbox_title">报名后</p>
          <div class="cardbox_content">
            <div class="cardmax" @click="$router.push('/xueweitiaoji')">
              <div class="cardtop"><img src="../assets/img/mdot4.svg" /> </div>
              <div class="cardtitle"><p>学位调剂</p></div>
            </div>
          </div>
        </div>
      </div>
      <div class="container_mid_right"></div>
    </div>
    <div class="container_bottom"></div>
  </div>
</template>

<script>
import autoPage from '../utils/autoPage'

export default {
  name: 'main',
  extends: autoPage,
  data () {
    return {}
  }
}
</script>

<style scoped lang="less">
.container {
  position: relative;
  background: url("../assets/img/mainbg.png");
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  &_top {
    width: 100%;
    height: 72px;
    background: url("../assets/img/maintop.svg") no-repeat left top;
    p{
      font-size: 32px;
      letter-spacing: 1.92px;
      text-align: center;
      line-height: 72px;
      font-weight: 700;
      background-image: linear-gradient(to bottom, #fff, #B6EAFF);
      -webkit-background-clip: text;
      color: transparent;
    }
  }
  &_mid {
    width: 100%;
    height:538px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:118px;
    &_left{
      width:317px;
      height:100%;
      background: url("../assets/img/mainlineleft.svg") no-repeat center;
    }
    &_content{
      display: flex;
      align-items: center;
      .cardbox{
        width: 406px;
        height:538px;
        background: url("../assets/img/maincardbg.svg") no-repeat left top /100% 100%;
        margin-right: 34px;
        &:last-child{
          margin-right:0
        }
        &_title{
          height:60px;
          line-height: 48px;
          text-align: center;
          font-size: 22px;
          letter-spacing: 4px;
          background-image: linear-gradient(to bottom, #fff, #79ABFF);
          -webkit-background-clip: text;
          color: transparent;
        }
        &_content{
          padding:24px;
          height:434px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          .cardmin{
            width:358px;
            height:205px;
            background: url("../assets/img/maincard2.svg") no-repeat left top /100% 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            &:hover{
              background: url("../assets/img/maincard2_cur.svg") no-repeat left top /100% 100%;
              .cardtop{
                background:url(../assets/img/cardtop_cur.svg) no-repeat center;
              }
            }
          }
          .cardmax{
            width:358px;
            height:434px;
            background: url("../assets/img/maincard1.svg") no-repeat left top /100% 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            &:hover{
              background: url("../assets/img/maincard1_cur.svg") no-repeat left top /100% 100%;
              .cardtop{
                background:url(../assets/img/cardtop_cur.svg) no-repeat center;
              }
            }
          }
          .cardtop{
            width:100%;
            height:106px;
            background:url(../assets/img/cardtop.svg) no-repeat center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
          .cardtitle{
            width:100%;
            margin-top:10px;
            height:32px;
            background: url("../assets/img/maintitlebg.svg") no-repeat center;
            p{
              line-height: 32px;
              text-align: center;
              letter-spacing: 1.2px;
              font-weight: bold;
              background-image: linear-gradient(to bottom, #fff, #B6EAFF);
              -webkit-background-clip: text;
              color: transparent;
            }
          }
        }
      }
    }
    &_right{
      width:317px;
      height:100%;
      background: url("../assets/img/mainlineright.svg") no-repeat center;
    }
  }
  &_bottom{
    width:100%;
    height:350px;
    background:url("../assets/img/mainbottombg.png") no-repeat center top /100% 100%;
  }
}
</style>
